<!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
 5     <title>HTML5测试</title>
 6     <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function() {
 9             var startX, startY, endX, endY;
10             var showADID = 1;
11             document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);
12             document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);
13             document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);
14             function touchStart(event) {
15                 var touch = event.touches[0];
16                 startY = touch.pageY;
17                 startX = touch.pageX;
18             }
19             function touchMove(event) {
20                 var touch = event.touches[0];
21                 //endY = (startY - touch.pageY);
22                 endX = touch.pageX;
23             }
24             function touchEnd(event) {
25                 $("#img0" + showADID).hide();
26                 showADID++;
27                 if (showADID > 4) {
28                     showADID = 1;
29                 }
30                 if ((startX - endX) > 100) {
31                     $("#img0" + showADID).show();
32                 }
33                 $("#spText").html("X轴移动大小：" + (startX - endX));
34             }
35         })
36     </script>
37 </head>
38 <body >
39     <form id="form1">
40     <div style="border:solid 1px Red;" id="divADBox">
41     <span id="spText">X轴移动大小：0</span>
42         <img id="img01" src="/Content/Images/1.gif"  />
43         <img id="img02" src="/Content/Images/2.gif" style="display:none;" />
44         <img id="img03" src="/Content/Images/3.gif" style="display:none;" />
45         <img id="img04" src="/Content/Images/4.gif" style="display:none;" />
46     </div>
47     </form>
48 </body>
49 </html>